import React, {Component} from 'react';
import {inject, observer} from "mobx-react";
import {SearchBar, Tabs} from 'antd-mobile';

const tabStatus = [
  { title: '全部', tabKey: null },
  { title: '春季', tabKey: 1 },
  { title: '夏季', tabKey: 2 },
  { title: '秋季', tabKey: 3 },
  { title: '冬季', tabKey: 4 }
];

@inject('dishListStore')
@observer
export default class DishListTop extends Component<any, any> {

  render() {
    const { season, changeSeason, changeSearchText } = this.props.dishListStore;

    return (
      <>
        <SearchBar placeholder='请输入菜名'
                   maxLength={20}
                   onSubmit={value => changeSearchText(value)}/>

        <Tabs tabs={tabStatus}
              initialPage={season ? season : 0}
              onChange={(tab) => { changeSeason(tab.tabKey); }}
        />
      </>
    );
  }
}
